<template>

  <div id="login_log">
    <el-table
        :data="tableData"
        style="width: 100%"
        @expand-change="detailedInformation"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="用户名">
              <span>{{ username }}</span>
            </el-form-item>
            <el-form-item label="用户id">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="联系方式">
              <span>{{ account }}</span>
            </el-form-item>
            <el-form-item label="登陆时间">
              <span>{{ props.row.time }}</span>
            </el-form-item>
            <el-form-item label="登录IP">
              <span>{{ props.row.ip }}</span>
            </el-form-item>
            <el-form-item label="所在城市">
              <span>{{ city }}</span>
            </el-form-item>
            <el-form-item label="注册时间">
              <span>{{ createTime }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>{{ sex }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
          label="用户id"
          prop="uid">
      </el-table-column>
      <el-table-column
          label="登录IP"
          prop="ip">
      </el-table-column>
      <el-table-column
          label="登录时间"
          prop="time">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "UserLoginLog",
  data() {
    return {
      tableData: [],
      username: '',
      city: '',
      createTime: '',
      sex: '未知',
      account: ''

    }
  },
  created() {
    //请求分页查询数据
    this.getAllUserLog()
  },
  methods: {
    getAllUserLog() {
      this.request.get("admin/allUserLog").then(res => {
        if (res.state === 200) {
          // console.log("获取所有登录日志成功" + res.data)
          this.tableData = res.data
        }
      })
    },
    //得到用户登录的详细信息
    detailedInformation(row, event, column) {
      // console.log(row.uid)
      // console.log(event)
      // console.log(column)
      //发送请求得到该用户所有的信息
      this.request.get("admin/getDBOById/" + row.uid).then(res => {
        // console.log(res)
        this.account = res.data.account
        this.createTime = res.data.createTime
        this.state = res.data.state
        this.username = res.data.username
      })

    }
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

#login_log {
  height: 800px;
  overflow: scroll;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

</style>
